<template>
    <el-card>
        <!--搜索组件-->
        <audit-process-search :auditProcessSearch="auditProcessSearchEntity" @onSearch="auditSearch" />
        <!--按钮组件-->
        <audit-process-options-btn />
        <!-- 分隔符 -->
        <hr />
        <!--数据展示-->
        <audit-process-data :formDefinition="auditProcessForm" :data="auditProcessData" :svg-list="svgList" @delBtn="delBtn"
            @downLoad="downLoadBPMN" />
        <!-- 对话框组件 -->
        <el-dialog width="480px" :visible.sync="dialogSwitch" :before-close="beforeClose" :close-on-click-modal="false"
            :destroy-on-close="true">
            <!--自定义功能插件-->
            <audit-publish :title="title" :data="auditProcessPublishEntity" :rules="auditProcessPublishEntityRles"
                ref="publishRef" />

            <!-- 对话框组件的按钮-->
            <template #footer>
                <slot name="btns">
                    <el-button @click="confirmExecute" type="primary" size="mini">确认</el-button>
                    <el-button @click="switchEvent" type="info" size="mini">取消</el-button>
                </slot>
            </template>
        </el-dialog>
    </el-card>
</template>


<script>
import auditProcessSearch from './auditSearch.vue'
import { auditProcessSearchEntity, auditProcessForm, auditProcessPublishEntity, auditProcessPublishEntityRles } from './entity/auditProcessEntity'
import { auditProcessListQueryApi, deleteBpmnDeployment, getBpmnFile } from '@/api/common/auditProcessApi'
import auditProcessOptionsBtn from './auditOptionsBtn.vue'
import auditProcessData from './auditData.vue'
import auditPublish from './auditPublish.vue'
import { downLoadFile } from '@/utils/fileUtils'
export default {
    name: "auditProcess",
    components: { auditProcessSearch, auditProcessOptionsBtn, auditProcessData, auditPublish },
    data() {
        return {
            auditProcessSearchEntity,
            auditProcessPublishEntity,
            auditProcessPublishEntityRles,
            auditProcessForm,
            auditProcessData: [],
            svgList: [],
            dialogSwitch: false,
            title: "流程发布",
            bpmnFile: "",
            callType: "",
        }
    },
    methods: {
        auditSearch() {
            auditProcessListQueryApi(this.auditProcessSearchEntity).then(data => {
                this.auditProcessData = data;
                this.svgList = data.map(p => p.svg);
            }).catch(err => {
                this.$message.error(err);
            })
        },
        //对话框执行
        confirmExecute() {
            if (this.$refs.publishRef.validate()) {
                const formData = new FormData();
                formData.append("file", this.bpmnFile);
                formData.append("processType", this.auditProcessPublishEntity.processType);
                formData.append("processName", this.auditProcessPublishEntity.processName);
                formData.append("deploymentId", this.auditProcessPublishEntity.deploymentId);
                this.$http.post("/common/auditProcess/publish", formData, { headers: { 'Content-Type': 'multipart/form-data' } }).then(data => {
                    this.$message.success("操作成功")
                    this.auditSearch();
                    this.switchEvent();
                }).catch(err => {
                    this.$message.error(err);
                })
            }
        },
        //对话框关闭前校验
        beforeClose(done) {
            if (this.visible) {
                done();
            } else {
                done(false);
            }
        },
        //对话框开关
        switchEvent() {
            this.dialogSwitch = !this.dialogSwitch;
        },
        //删除流程
        delBtn(row) {
            this.$confirm(`确认是否要删除 [${row.processName}] ?`, '操作确认', {
                confirmButtonText: '确认',
                cancelButtonText: '取消'
            }).then(() => {
                deleteBpmnDeployment(row.deploymentId).then(data => {
                    this.$message.success("删除成功")
                    this.auditSearch();
                }).catch(err => {
                    this.$message.error(err);
                })
            }).catch(() => { })
        },
        //下载BPMN文件
        downLoadBPMN(row) {
            getBpmnFile(row.processInstanceId).then(data => {
                let start = data.indexOf("process");
                let filename = data.substr(start, data.indexOf(">"));
                filename = filename.substr(filename.indexOf("id") + 4);
                filename = filename.substr(0, filename.indexOf('"'))+'.bpmn';
                downLoadFile(data, filename, "application/bpmn20-xml")
            }).catch(err => {
                this.$message.error(err);
            })
        },
    },
    mounted() {
        this.auditSearch();
        if (this.$route.params) {
            const blob = new Blob([this.$route.params.file], { type: "application/xml" });
            const file = new File([blob], this.$route.params.filename);
            this.bpmnFile = file;

            //修改流程发布
            if (this.$route.params.process) {
                this.callType = this.$route.params.callType;
                this.processId = this.$route.params.originAuditProcess;
                this.title = '流程变更';
                this.auditProcessPublishEntity.processName = this.$route.params.process.processName;
                this.auditProcessPublishEntity.deploymentId = this.$route.params.process.deploymentId;
                this.switchEvent();
            }
            //新增流程发布
            else if (this.$route.params.callType === 'add') {
                this.callType = this.$route.params.callType;
                this.title = "流程发布",
                    this.switchEvent();
            }
        }
    }

}
</script>

<style scoped lang="scss"></style>